<template>
	<view class="content" id="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="" style="padding-left: 20rpx;">
			<view class="text-area">
				<text class="title">{{title}}123</text>
			</view>
		</view>
		
		<view @click="again" class="again">
			再来一次
		</view>
		<Test ref="TestNode"></Test>
		<view class="" style="margin: 100rpx 0 0 150rpx;background-color: antiquewhite;padding: 50rpx;">
			自定义聚焦
		</view>
		
		<!-- 普通用法 -->
		<fast-guide
			:show="guideShow" 
			:list="guideList" 
			:index="guideIndex"
			@open="guideOpen"
			@close="guideClose"
			@focus="guideFocus"
			@mask="guideMask"
			@next="guideNext" 
			@last="guideLast" 
			@skip="guideSkip" 
			@finish="guideFinish"
			@getQuery="getQuery"
		></fast-guide>
		
		<!-- 作用域插槽用法 -->
		<!-- <fast-guide 
			:show="guideShow" 
			:list="guideList" 
			:index="guideIndex"
			@open="guideOpen"
			@close="guideClose"
			@focus="guideFocus"
			@mask="guideMask"
			@next="guideNext" 
			@last="guideLast" 
			@skip="guideSkip" 
			@finish="guideFinish"
			@getQuery="getQuery"
		>
			<template #message="{msg}" >
				<view class="" style="color: #333;">
					【作用域插槽】{{msg}}
				</view>
			</template>
		</fast-guide> -->
	</view>
</template>

<script>
	import Test from './component/test.vue'
	
	export default {
		components:{
			Test
		},
		data() {
			return {
				title: 'Hello',
				
				guideShow:false,
				guideList:[
					
					{
						target:'#content',
						position:'bottom',
						msg:'这是第一步'
					},
					{
						target:'.logo',
						msg:'这是第二步【自定义样式】',
						position:'bottom',
						msgStyles:{
							'width':'60vw',
							'color':'#ff5500'
						}
					},
					{
						target:'.text-area',
						position:'top',
						msg:'这是第三步'
					},
					{
						// 使用ref指定组件聚焦时必须定义getQuery回调
						ref:'TestNode',
						target:'.children-node',
						position:'bottom',
						msg:'这是【子组件】聚焦，使用ref指定组件聚焦时必须定义getQuery回调'
					},
					{
						// 使用ref指定组件聚焦时必须定义getQuery回调
						ref:'TestNode',
						target:'.deep-children-node',
						position:'bottom',
						msg:'这是【嵌套子组件】聚焦，使用ref指定组件聚焦时必须定义getQuery回调'
					},
					{
						width:300,
						height:180,
						
						right:150,
						top:900,
						position:'top',
						msg:'这是自定义聚焦范围，支持响应式单位'
					},
					
					{
						target:'.again',
						position:'bottom',
						msg:'点击此处可以重新体验'
					},
					
				],
				guideIndex:0,
				
				testDom:{}
			}
		},
		onLoad() {

		},
		mounted() {
			this.guideShow = true
		},
		methods: {
			guideOpen(e){
				console.log(e,'guideOpen')
				uni.showToast({
					title:'打开引导',
					icon:'none'
				})
			},
			guideClose(e){
				console.log(e,'guideClose')
				uni.showToast({
					title:'关闭引导',
					icon:'none'
				})
			},
			guideFocus(e){
				console.log(e,'guideFocus')
				uni.showToast({
					title:'聚焦范围点击事件',
					icon:'none'
				})
			},
			guideMask(e){
				console.log(e,'guideMask')
				uni.showToast({
					title:'遮罩范围点击事件',
					icon:'none'
				})
			},
			getQuery(fn){
				//当使用ref属性进行引导时，此处传入需要聚焦的组件的父组件实例对象
				console.log('父组件事件被触发，子组件获取兄弟组件布局查询对象')

				// #ifdef VUE2
				// vue2传入this
				fn.call(this)
				// #endif
				
				// #ifdef VUE3
				// import { getCurrentInstance } from 'vue'
				// vue3通过getCurrentInstance获取this
				fn.call(getCurrentInstance().proxy)
				// #endif
			},
			guideNext(e){
				console.log(e,'guideNext')
				this.guideIndex++
			},
			guideLast(e){
				console.log(e,'guideLast')
				this.guideIndex--
			},
			guideSkip(e){
				console.log(e,'guideSkip')
				this.guideShow = false
			},
			guideFinish(e){
				console.log(e,'guideFinish')
				this.guideShow = false
			},
			again(){
				this.guideIndex = 0
				this.guideShow = true
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	/* 深度选择修改步骤盒子样式 */
	/* /deep/ .step-btn{
		color: red;
	} */
</style>
